import { ShElement } from './ShElement'


export class ShDialog extends ShElement { 

    private $titlebar: HTMLElement
    private $dialog: HTMLElement

    constructor(title: string) {
        super()
        this.addClass('sh-hide')

        this.$shadow.innerHTML = `
            <style>
                :host {
                    position: fixed;
                    inset: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    z-index: 999;
                }
                #dialog {
                    position: absolute;
                    border: solid 1px black;
                    display: flex;
                    flex-direction: column;
                }
                #titlebar {
                    height: 2.5em;
                    background-color: white;
                    display: flex;
                }
                #titlebar > span {
                    flex-grow: 1;
                    margin-left: 1em;
                    min-width: 20em;
                    line-height: 2.5em;
                }
                #body {
                    flex-grow: 1;
                    padding: 1em;
                    background-color: var(--color-ctrl);
                    display: flex;
                    flex-direction: column;
                }
            </style>
            <div id="dialog">
                <div id="titlebar">
                    <span>${title}</span>
                    <sh-win-btn class="close"></sh-win-btn>
                </div>
                <div id="body">
                    <slot></slot>
                </div>
            </div>
            `

        this.$dialog = this.$shadow.getElementById('dialog')!

        this.$titlebar = this.$shadow.getElementById('titlebar')!
        this.on('shev-win-close', () => this.close())

        let dragging = false
        let prevX = 0
        let prevY = 0
        this.$titlebar.on('pointerdown', (e) => {
            if ((e.target! as HTMLElement).tagName === 'SH-WIN-BTN')
                return
            dragging = true
            prevX = e.pageX
            prevY = e.pageY
            this.$titlebar.setPointerCapture(e.pointerId)
        })
        this.$titlebar.on('pointermove', (e) => { 
            if (! dragging)
                return
            const left = this.$dialog.offsetLeft + e.pageX - prevX
            const top = this.$dialog.offsetTop + e.pageY - prevY

            this.$dialog.updateStyle(`left:${left}px;top:${top}px`)
            prevX = e.pageX
            prevY = e.pageY
        })
        this.$titlebar.on('pointerup', (e) => { 
            if (! dragging)
                return
            dragging = false
            this.$titlebar.releasePointerCapture(e.pointerId)
        })
    }

    public setTitle(title: string) {
        this.$titlebar.firstElementChild!.textContent = title
    }

    public showModal() {
        document.body.append(this)
        this.removeClass('sh-hide')
        this.$dialog.style.left = (window.innerWidth - this.$dialog.offsetWidth) / 2 + 'px'
        this.$dialog.style.top = (window.innerHeight - this.$dialog.offsetHeight) * 0.3 + 'px'
    }

    public close() {
        this.addClass('sh-hide')
        this.remove()
    }
}
customElements.define('sh-dialog', ShDialog)